<template>
  <div>
    <el-form
      ref="chForm"
      :model="chForm"
      :rules="chRules"
    >
      <el-row>
        请在下方填入相关信息完成<span style="color: indianred">密码</span>的更改
      </el-row>
      <el-form-item prop="oldPassword">
        <el-input v-model="chForm.oldPassword" type="text" autocomplete="off" placeholder="旧密码" show-password>
          <template slot="prepend">
            <i class="el-icon-key">旧密码</i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="newPassword">
        <el-input v-model="chForm.newPassword" type="text" autocomplete="off" placeholder="新密码" show-password>
          <template slot="prepend">
            <i class="el-icon-key">新密码</i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input v-model="chForm.checkPass" type="text" autocomplete="off" placeholder="再次输入密码" show-password>
          <template slot="prepend">
            <i class="el-icon-unlock">再次输入密码</i>
          </template>
        </el-input>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button type="primary" style="width: 100%" @click="nextStep">提交</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { validateEmptyPassword } from '@/utils/validate-tools'

export default {
  name: 'StudentBaseInfoPassword2',
  data: function() {
    const validateReCheckPassword = (rule, value, callback) => {
      const valueStatus = this.chForm.newPassword === value
      if (value === '') {
        callback(new Error('确认密码不能为空'))
        return
      }
      if (valueStatus) {
        callback()
      } else {
        callback(new Error('与新设置的密码不同，请重新设置密码'))
      }
    }
    const validateNewCheckPassword = (rule, value, callback) => {
      const valueStatus = this.chForm.oldPassword === value
      if (value === '') {
        callback(new Error('旧密码不能为空'))
        return
      }
      if (valueStatus) {
        callback(new Error(''))
      } else {
        callback()
      }
    }
    return {
      chForm: {
        oldPassword: '',
        newPassword: '',
        checkPass: ''
      },
      chRules: {
        oldPassword: [{ require: true, trigger: 'blur', validator: validateEmptyPassword }],
        newPassword: [{ require: true, trigger: 'blur', validator: validateNewCheckPassword }],
        checkPass: [{ require: true, trigger: 'blur', validator: validateReCheckPassword }]
      }
    }
  },
  methods: {
    nextStep() {
      this.$emit('stepChangeEvent', 3)
      this.$refs.chForm.resetFields()
    },
    clearAllData() {
      this.$refs.chForm.resetFields()
    }
  }
}
</script>

<style scoped>

</style>
